<template>
  <v-card>
    <v-card-title>
      <v-flex>
        <span>聚合类型：</span>
        <v-btn-toggle mandatory v-model.lazy="filter.type">
          <v-btn flat :value="1">
            商品
          </v-btn>
          <v-btn flat :value="2">
            分类
          </v-btn>
        </v-btn-toggle>
      </v-flex>
      <v-flex>
        <span class="demonstration">查看月度统计数据</span>
        <el-date-picker
          v-model="queryDate"
          type="month"
          @change="changeMonth"
          placeholder="选择月">
        </el-date-picker>
      </v-flex>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px2">
      <div ref="sale" style="width: 100%;height:450px"></div>
    </v-card-text>
  </v-card>
</template>

<script>
  // 按需引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/line');

  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/title');
  require('echarts/lib/component/legend');

  // import echarts from 'echarts'

  import {DatePicker} from 'element-ui'

  export default {
    name: "dashboard",
    components: {
      elDatePicker: DatePicker
    },
    data(){
      return {
        filter:{
          type:1
        },
        queryDate:'',
        fullYear:null,
        month:null
      }
    },
    mounted(){
      let date = new Date();
      this.fullYear=date.getFullYear();
      this.month=date.getMonth()+1;
      this.$nextTick(() => {
        var sale = echarts.init(this.$refs.sale);
        sale.showLoading();
        this.$http({
          method: 'post',
          url: '/statis/polymer/type',
          data:{curMonth:this.month,curYear:this.fullYear,type:1},
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#91c7ae'],
              title: {
                text: this.fullYear+'年'+this.month+'月商品销售统计',
                left:500
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'商品名',type:'category',gridIndex:0,data: []},
                {name:'商品名',type:'category',gridIndex:1,data: []}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let obj = resp.data.data;
            let series = [];
            let bar = {type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
            let line = {type:'line',xAxisIndex:1,yAxisIndex:1,data:[]}
            let xAxisData = [];
            if(resp.data.data != null){
              obj.forEach(function (item) {
                bar.data.push(item.num);
                line.data.push(item.totalPrice/100);
                xAxisData.push(item.spuName);
              })
              series.push(bar);
              series.push(line);
            }
            option.xAxis[0].data=xAxisData;
            option.xAxis[1].data=xAxisData;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      })
    },
    watch: {
      filter: {
        deep: true,
        handler() {
          if(this.filter.type==1){
            this.queryStatisBySpu();
          }else{
            this.queryStatisByCategory();
          }
        }
      }
    },
    methods:{
      queryStatisBySpu(){
        var sale = echarts.init(this.$refs.sale);
        sale.showLoading();
        this.$http({
          method: 'post',
          url: '/statis/polymer/type',
          data:{curMonth:this.month,curYear:this.fullYear,type:1},
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#91c7ae'],
              title: {
                text: this.fullYear+'年'+this.month+'商品销售统计',
                left:500
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'商品名',type:'category',gridIndex:0,data: []},
                {name:'商品名',type:'category',gridIndex:1,data: []}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let series = [];
            let xAxisData = [];
            let bar = {type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
            let line = {type:'line',xAxisIndex:1,yAxisIndex:1,data:[]};
            if(resp.data.data != null){
              resp.data.data.forEach(function (item) {
                bar.data.push(item.num);
                line.data.push(item.totalPrice/100);
                xAxisData.push(item.spuName);
              });
            }
            series.push(bar);
            series.push(line);
            option.xAxis[0].data=xAxisData;
            option.xAxis[1].data=xAxisData;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option,true);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      queryStatisByCategory(){
        var sale = echarts.init(this.$refs.sale);
        sale.showLoading();
        this.$http({
          method: 'post',
          url: '/statis/polymer/type',
          data:{curMonth:this.month,curYear:this.fullYear,type:2},
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            let option = {
              color:['#91c7ae'],
              title: {
                text: this.fullYear+'年'+this.month+'分类销售统计',
                left:500
              },
              grid:[{top:40,bottom:'58%'},{top:'58%',bottom:40}],
              tooltip: {
                trigger: 'axis'
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              xAxis: [
                {name:'分类名',type:'category',gridIndex:0,data: []},
                {name:'分类名',type:'category',gridIndex:1,data: []}
              ],
              yAxis: [{name:'件',type:'value',gridIndex:0},
                {name:'元',type:'value',gridIndex:1}],
              series:[]
            };

            let series = [];
            let xAxisData = [];
            let bar = {type:'bar',xAxisIndex:0,yAxisIndex:0,data:[]};
            let line = {type:'line',xAxisIndex:1,yAxisIndex:1,data:[]};
            if(resp.data.data != null){
              resp.data.data.forEach(function (item) {
                bar.data.push(item.num);
                line.data.push(item.totalPrice/100);
                xAxisData.push(item.categoryName);
              });
            }
            series.push(bar);
            series.push(line);
            option.xAxis[0].data=xAxisData;
            option.xAxis[1].data=xAxisData;
            option.series=series;
            sale.hideLoading();
            sale.setOption(option,true);
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      changeMonth(val){
        let date = new Date(val);
        this.fullYear=date.getFullYear();
        this.month=date.getMonth()+1;
        if(this.filter.type==1){
          this.queryStatisBySpu();
        }else{
          this.queryStatisByCategory();
        }
      }
    }
  }
</script>

<style scoped>

</style>
